<html>
    <head>
    	<meta charset="utf-8">
    	<title>单一按钮显示/隐藏一播放列表收缩展开</title>
    	<style type="text/css">
            #outer{width:200px;height:200px;margin: 0 auto;font-size: 12px;color: #57646E;}
            h2,ul,li,a{margin: 0px;padding:0px; list-style: none;text-decoration: none;}
            h2{height: 30px;line-height: 30px;border: 1px solid #000;background: #ccc;cursor: pointer;}
            ul{background:#e6e6e6;display: none;border: 1px solid #000;}
            ul li{height: 30px;line-height: 30px;}
            ul li a{color: #57646E;display: block;}
            a:hover{text-decoration: underline;background: #fff;}
    	</style>
    </head>
    <body>
        <div id="outer">
            <h2 id="a">播放列表....</h2>
            <ul id="b">
                <li><a href="javascrpit:;">sdasas</a></li>
                <li><a href="javascrpit:;">sdasas</a></li>
                <li><a href="javascrpit:;">sdasas</a></li>
                <li><a href="javascrpit:;">sdasas</a></li>
                <li><a href="javascrpit:;">sdasas</a></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function  () {
            // var oh=document.getElementById('a');
            // var oul=document.getElementById('b');
            var oh=document.getElementById('outer').getElementsByTagName('h2')[0];
            /*console.log(oh);*/
            var oul=document.getElementById('outer').getElementsByTagName('ul')[0];
            var tf=true;
            oh.onclick=function(){
                if(tf){
                    oul.style.display="block";
                    tf=false;
                }
                else{
                    oul.style.display="none";
                    tf=true;
                }     
            }
        }
    </script>
</html>